<template>
  <div class="index">
    <p>消息：{{ message }}</p>
    <el-form
      ref="form" :model="form" :inline="true"
      label-position="left"
    >
      <el-row>
        <el-col :span="12" :offset="0">
          <el-form-item label="IP:">
            <el-input v-model="form.ip" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="端口号:">
            <el-input v-model="form.port" style="width: 100px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" :disabled="message === '连接成功'" @click="connect">连接</el-button>
        <el-button :disabled="message !== '连接成功'" @click="close">断开连接</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
let ipc = window.ipcRenderer
export default {
  name: 'Home',
  data() {
    return {
      message: '',
      form: {
        ip: '127.0.0.1',
        port: 8080
      }
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      //   监听客户端发来的消息
      ipc.on('socket-receive', (event, data) => {
        console.log(data)
        this.message = data
      })
    },
    close() {
      ipc.send('handlelisten', {
        isOpen: false
      })
    },
    connect() {
      if (!this.form.port) return this.$message.error('请输入端口号')
      ipc.send('handlelisten', {
        isOpen: true,
        port: this.form.port
      })
    }
  }
}
</script>

<style lang="scss">
.index{
  padding: 16px;
  font-size: 16px;
  p{
    font-size: 16px;
  }
}
</style>
